import {
    Breadcrumb,
    BreadcrumbItem,
    BreadcrumbLink,
    BreadcrumbList,
    BreadcrumbPage,
    BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"
import {Separator} from "@/components/ui/separator"
import {SidebarTrigger,} from "@/components/ui/sidebar"

export function PageHeader({items}: { items: { title: string; url: string }[] }) {
    return (
        <header className="flex h-16 shrink-0 items-center gap-2">
            <div className="flex items-center gap-2 px-4">
                <SidebarTrigger className="-ml-1"/>
                <Separator
                    orientation="vertical"
                    className="mr-2 data-[orientation=vertical]:h-4"
                />
                <Breadcrumb>
                    <BreadcrumbList>
                        {items.map((item, index) => (

                            <BreadcrumbItem key={index}>
                                {item.url === "#" ? <BreadcrumbPage> {item.title}</BreadcrumbPage> :
                                    (<>
                                        <BreadcrumbLink href={item.url}>
                                            {item.title}
                                        </BreadcrumbLink>
                                        /

                                    </>)}

                            </BreadcrumbItem>


                        ))}
                    </BreadcrumbList>
                </Breadcrumb>
            </div>
        </header>
    )
}
